<template>
  <el-input
    v-model="displayTime"
    placeholder="请输入时间 (HH:mm)"
    @input="handleInput"
    @blur="handleBlur"
  />
</template>

<script>
export default {
  name: 'TimeInput',
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      displayTime: this.formatTime(this.value)
    };
  },
  watch: {
    value (newVal) {
      this.displayTime = this.formatTime(newVal);
    }
  },
  methods: {
    // 将分钟转换为 HH:mm 格式
    formatTime (minutes) {
      const hours = Math.floor(minutes / 60);
      const mins = minutes % 60;
      return `${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}`;
    },
    // 将 HH:mm 格式转换为分钟
    parseTime (time) {
      const [hours, minutes] = time.split(':').map(Number);
      if (isNaN(hours) || isNaN(minutes)) {
        return 0;
      }
      return hours * 60 + minutes;
    },
    // 处理输入事件
    handleInput (value) {
      this.displayTime = value;
      this.$emit('input', this.parseTime(value));
    },
    // 处理失焦事件，格式化时间
    handleBlur () {
      const time = this.parseTime(this.displayTime);
      this.displayTime = this.formatTime(time);
      this.$emit('input', time);
    }
  }
};
</script>

<style scoped>
/* 你可以根据需要添加样式 */
</style>